<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page session="false" contentType="text/html; charset=UTF-8" pageEncoding="utf8"%>
<html>
<head>
	<title>The List of existing Ingredients</title>
	<link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/smoothness/jquery-ui-1.8.17.custom.css" />">
	<link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/style.css" />">
</head>
<body>
	<h1>Ingredients list</h1>
	<p>${message}</p>

	<div id="mainContainer">
		<form:form id="searchingredient" class="searchfield" name="searchingredient" method="GET" commandName="ingredient" action="/ingredients/ingredient/search/">
			<label for="term">Search for an Ingredient:</label>
			<!--  ui-widget should be defined for element access over JQuery UI -->
			<input id="term" name="term" class="ui-widget"/>
			<input type="submit" value="search" />
		</form:form>
	
		<div id="datatableContainer">
			<table id="datatable" width="100%">
				<thead>
					<tr>
						<td>Ingredient Name</td>
						<td>Calories</td>
						<td>Fat</td>
						<td>Carbs</td>
						<td>Protein</td>
						<td>Action</td>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${ingredients}" var="current_ingredient">
						<tr>
							<td>${current_ingredient.name}</td>
							<td>${current_ingredient.calories} kcal</td>
							<td>${current_ingredient.fat} g</td>
							<td>${current_ingredient.carbs} g</td>
							<td>${current_ingredient.protein} g</td>
							<td><a href="/ingredients/ingredient/delete/${current_ingredient.id}" class="deleteLink">Delete</a></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		
		<fieldset>
			<legend>Add new Ingredient</legend>
			<form:form modelAttribute="newIngredient" method="POST" action='/ingredients/ingredient/add'>
				<label for="name">Name:</label>
				<form:input id="ingredient_name" path="name" value="${name}" />
				<label for="calories">Calories:</label>
				<form:input id="calories" path="calories" value="${calories}" />
				<br />
				<label for="fat">Fat:</label>
				<form:input id="fat" path="fat" value="${fat}" />
				<label for="carbs">Carbs:</label>
				<form:input id="carbs" path="carbs" value="${carbs}" />
				<br />
				<label for="protein">Protein:</label>
				<form:input id="protein" path="protein" value="${protein}" />
				<input id="submitNewIngredient" type="submit" value="Add" />
			</form:form>
		</fieldset>
	</div>
	
	<center>
	<a href="/ingredients/activity"	class="deleteLink">Activities list</a>
	</center>
	
	<script type="text/javascript" src="<c:url value="/resources/js/lib/jquery-1.7.1.min.js" />"></script>
	<script type="text/javascript" src="<c:url value="/resources/js/lib/jquery-ui-1.8.17.custom.min.js" />"></script>
	<script type="text/javascript" src="<c:url value="/resources/js/lib/jquery-datatables-1.9.4.js" />"></script>
	<script type="text/javascript" src="<c:url value="/resources/js/lib/log4javascript.js" />"></script>
	<script type="text/javascript" src="<c:url value="/resources/js/script.js" />"></script>
	
</body>
</html>